<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>刘天平</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			tr {
				text-align: center;
			}
			
			.div0 {
				width: 100%;
				height: 102px;
				text-indent: 3em;
				border-bottom: orangered 3px solid;
				margin-bottom: 25px;
			}
			
			.div0 img {
				position: relative;
				top: 23px;
				line-height: 102px;
			}
			
			#div1 {
				display: inline-block;
			}
			
			#div1 span {
				font: 1.9em "微软雅黑";
			}
			
			.body {
				width: 1126px;
				margin: 0 auto;
				border: 1px solid;
			}
			
			#head {
				position: relative;
				left: -209px;
			}
			
			.input {
				height: 40px;
				width: 120px;
				border: 1px darkgray solid;
				margin: 0 auto;
			}
			
			.input span {
				font: 20px bold;
				cursor: pointer;
				text-align: center;
				line-height: 38px;
				height: 40px;
				width: 40px;
				display: block;
				float: left;
			}
			
			.input span:hover {
				background-color: gainsboro;
			}
			
			#quanxuan,
			#button1,
			#button2 {
				cursor: pointer;
				border: 1px solid gainsboro;
				background-color: white;
				width: 20px;
				height: 20px;
			}
			
			#quanxuan:hover {
				background-image: url(../day2/2017-08-01_195127.png);
			}
			
			#button1:hover {
				background-image: url(../day2/2017-08-01_195127.png);
			}
			
			#button2:hover {
				background-image: url(../day2/2017-08-01_195127.png);
			}
			
			#text {
				line-height: 40px;
				height: 40px;
				text-align: center;
				border: none;
				outline: none;
			}
			
			.shan {
				cursor: pointer;
				position: relative;
				font: 16px bold;
				left: 60px;
				background-color: white;
				line-height: 25px;
				text-align: center;
				color: gray;
				height: 25px;
				border-radius: 50%;
				width: 25px;
			}
			
			.shan:hover {
				color: white;
				background-color: orangered;
			}
			
			#boy1 {
				height: 38px;
				border: 0;
				outline: none;
			}
			
			#boy2 {
				height: 38px;
				border: 0;
				outline: none;
			}
			
			#pay {
				font-size: 23px;
				background-color: #E0E0E0;
				color: gray;
				float: right;
				text-align: center;
				height: 60px;
				line-height: 50px;
				width: 180px;
			}
			
			#tab_c {
				/*border: 1px solid;*/
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.3);
				position: absolute;
				top: 0px;
				display: none;
			}
			
			.confirm h1 {
				position: relative;
				left: 150px;
				top: 50px;
			}
			
			#tab_c .confirm {
				position: relative;
				top: 300px;
				margin: 0px auto;
				/*border: 1px solid;*/
				width: 500px;
				height: 275px;
				background-color: white;
				z-index: 1;
			}
			
			.confirm li {
				float: left;
				list-style: none;
				margin: 30px 50px;
				position: relative;
				left: 50px;
				top: 100px;
				border: 1px solid;
				width: 100px;
				height: 35px;
				line-height: 35px;
				text-align: center;
				color: white;
			}
			
			.confirm .quxiao {
				background-color: #E0E0E0;
			}
			
			.confirm .quxiao:hover {
				background-color: #B0B0B0;
			}
			
			.confirm .queding {
				background-color: #FF6700;
			}
			
			.confirm .queding:hover {
				background-color: #EA4B12;
			}
			
			#go {
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.5);
				position: absolute;
				top: 0px;
				display: none;
			}
			#go ul{position: relative; top:110px ;  left: 400px;
			}
			#go ul li{list-style-type: none;float: left;
			padding-right: 13px;
			}
			.fans {
				height: 300px;
				width: 237px;
				background-color: white;
			}
			.fans img{position: relative;
				left: 50px;top: 50px;
			}
	.circle{margin-left: 5px;    cursor: pointer;
	content: ""; 
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 11px;
    position: absolute; top:5px ;
			}
			.circle:hover{
				background-color:#e0e0e0 ;
			}
	.font{font-family: "微软雅黑";
		position: relative;
		top:40px;left:10px;text-align: center;
	}
	.shan1 {
				cursor: pointer;
				position: relative;
				font: 20px bold;
				top: 30px;
				left: 1200px;
				background-color: white;
				line-height: 25px;
				text-align: center;
				color: gray;
				height: 25px;
				border-radius: 50%;
				width: 25px;
			}
			
			.shan1:hover {
				color: white;
				background-color: orangered;
			}
		</style>
	</head>

	<body>
		<div>
			<div class="div0">
				<img src="img/logo.png" />
				<div id="div1"> <span>我的购物车</span>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</div>

			</div>
			<div class="body">
				<table id="buy" border="1" cellspacing="0" cellpadding="0" width="100%">
					<tbody>
						<tr height="72">
							<td width="40">
								<input type="button" name="" id="quanxuan" value="" /></td>
							<td width="522"><span id="head">全选</span> 商品名称</td>
							<td width="80">单价</td>
							<td width="150">数量</td>
							<td>小计</td>
							<td>操作</td>
						</tr>
						<tr height="118">
							<td width="40"> <input type="button" name="" id="button1" value="" /></td>
							<td><img src="../day2/xmad_15008876143703_gOecR.jpg" height="76" width="90" />
							</td>
							<td>199</td>
							<td>
								<div class="input">
									<span onclick="jian(this)">-</span><span><input size="3"   type="text" name="" id="text" value="1" /></span><span onclick="jia(this)">+</span>
								</div>
							</td>
							<td>199</td>
							<td>
								<div class="shan" onclick="shan(this)">×</div>
							</td>
						</tr>
						<tr height="118">
							<td width="40"> <input type="button" name="" id="button1" value="" /></td>
							<td><img src="../day2/xmad_15008876143703_gOecR.jpg" height="76" width="90" />
							</td>
							<td>199</td>
							<td>
								<div class="input">
									<span onclick="jian(this)">-</span><span><input size="3"   type="text" name="" id="text" value="1" /></span><span onclick="jia(this)">+</span>
								</div>
							</td>
							<td>199</td>
							<td>
								<div class="shan" onclick="shan(this)">×</div>
							</td>
						</tr>
						<tr height="118">
							<td width="40"> <input type="button" name="" id="button1" value="" /></td>
							<td><img src="../day2/xmad_15008876143703_gOecR.jpg" height="76" width="90" />
							</td>
							<td>199</td>
							<td>
								<div class="input">
									<span onclick="jian(this)">-</span><span><input size="3"   type="text" name="" id="text" value="1" /></span><span onclick="jia(this)">+</span>
								</div>
							</td>
							<td>199</td>
							<td>
								<div class="shan" onclick="shan(this)">×</div>
							</td>
						</tr>
						<tr height="118">
							<td width="70"> <input type="button" name="" id="button2" value="" /></td>
							<td><img src="../day2/xmad_15009492598428_qSuMH.jpg" height="76" width="90" /></td>
							<td>166</td>
							<td>
								<div class="input">
									<span onclick="jian(this)">-</span><span><input size="3"   type="text" name="" id="text" value="1" /></span><span onclick="jia(this)">+</span>

								</div>
							</td>
							<td>166</td>
							<td>
								<div class="shan" onclick="shan(this)">×</div>
							</td>
						</tr>
						<tr height="40">
							<td><span style="color:gray;">继续购物</span></td>
							<td><span style="color:gray;">共</span>
								<span style="color: orangered;">4</span><span style="color:gray">件商品，已选择</span><span style="color: orangered;">0</span><span style="color:gray;">件</span>
							</td>
							<td></td>
							<td colspan="3"><span style="color: orangered;font-family: '微软雅黑';">合计(不含运费)：</span><span style="color: orangered;font: 32px bolder;">0.00</span>
								<span id="pay">去结算</span>
							</td>
						</tr>
					</tbody>
				</table>
				<div id="add">
			<input type="button" name="" id="add1" value="添加"  onclick="add1()" />
				</div>
				<!--模态框1购物-->
				<div id="go">
					<div class="selct">
						<div class="shan1" onclick="shan1(this)">×</div>
			<span style="font-size: 2.0em;color: white;position:relative ;top: 94px;left: 560px;font-family: '微软雅黑';">
							选择产品	
							</span>
						<ul>
							<li>
								<div class="fans">
									<div class="circle"></div>
									<img width="140"  src="img/pms_1468287589.40786199!220x220.jpg" />
								<div class="font">
									<span>米家随身风扇 蓝色</span><br />
								<span style="color: orangered;">14.9元</span>
								</div>
								</div>
							</li>
							<li>
								<div class="fans">
									<div class="circle"></div>
									<img  width="140" src="img/pms_1468287611.41694554!220x220.jpg" />
								<div class="font">
									<span>米家随身风扇 白色</span><br />
								<span style="color: orangered;">14.9元</span>
								</div>
								</div>
							</li>
						</ul>
						<div class="gomtk">
							加入购物车
						</div>
					</div>
				</div>
				<!--模态框确认删除-->
				<div id="tab_c">
					<div class="confirm">
						<h1>确定删除吗？</h1>
						<ul>
							<li class="quxiao">取消</li>

							<li class="queding">确定</li>

						</ul>
					</div>
				</div>
			</div>

		</div>
		<script type="text/javascript">
			var buy = document.getElementById("buy");

			inputs = buy.getElementsByTagName("input");
			for(var i = 0; i < inputs.length; i++) {
				inputs[i].onchange = function() {
					trs = this.parentNode.parentNode.parentNode.parentNode;
					dj = trs.children[2].innerHTML;
					var num = this.value;
					console.log(num);
					var sum = dj * num;
					//console.log(sum);
					trs.children[4].innerHTML = sum;
					footsum();
				}
			};
			document.getElementById("quanxuan").onclick = function() {
				for(var i = 0; i < inputs.length; i++) {
					inputs[i].checked = this.checked;
				}
			};

			function footsum() {
				var sum = 0;
				var buy = document.getElementById("buy");
				var trs = buy.children[0].children;
				for(var i = 1; i < trs.length; i++) {
					if(trs[i].firstElementChild.firstElementChild.checked) {
						sum += parseFloat(trs[i].children[4].innerHTML);
					}
				document.getElementById("foot").innerHTML = sum;
				}
			};
function add1(){
	    var go=document.getElementById("go");
	  var add1=document.getElementById("add1");
	   add1.onclick=function(){
	   	 go.style.display="block";
	   }
};
			function shan(t) {
				var con = document.getElementById("tab_c");
				var quxiao = document.querySelector(".quxiao");
				var queding = document.querySelector(".queding");
				quxiao.onclick = function() {
					//	console.log(1);
					con.style.display = "none";
				}
				queding.onclick = function() {
					t.parentNode.parentNode.remove();
					con.style.display = "none";
					footsum();
				}
				con.style.display = "block";
			};
function shan1(t) {
				var go= document.getElementById("go");
				var shan1=document.querySelector(".shan1");
				shan1.onclick = function() {
					go.style.display = "none";
				}
	};
			function jian(t) {
				var n = 0;
				var sum = 0;
				var num = parseInt(t.parentNode.children[1].children[0].value);
				var dj = t.parentNode.parentNode.parentNode.children[2].innerHTML;
				var tr = t.parentNode.parentNode.parentNode;
				console.log(tr);
				if(num <= 1) {
					num = 1;
				} else {
					n = num - 1;
				}
				t.parentNode.children[1].children[0].value = n;
				sum = parseInt(dj * n) - sum;
				tr.children[4].innerHTML = sum;
				footsum();
			};

			function jia(t) {
				var sum = 0;
				var n = 0;
				var dj = t.parentNode.parentNode.parentNode.children[2].innerHTML;
				var tr = t.parentNode.parentNode.parentNode;
				// 	console.log(tr);
				var num = parseInt(t.parentNode.children[1].children[0].value);

				if(num >= 20) {
					num = 20;
				} else {
					n = num + 1;
				}
				t.parentNode.children[1].children[0].value = n;
				sum += parseInt(dj * n);
				tr.children[4].innerHTML = sum;
				footsum();
			};
		</script>

	</body>

</html>